<template>
    <div>
        <!-- 
            安装markdown富文本编辑器
            cnpm install --save mavon-editor
         -->
          <div>
              <mavon-editor v-model="content" ref="md" @change="change"  @imgAdd="$imgAdd"  :ishljs = "true" style="min-height: 600px" />
          </div>
          <div style="text-align: center; margin-top: 10px">
              <button @click="addContent">添加</button>
          </div>
        <div>
            <select name="" id="" multiple>
                <option value="">飞驰人生</option>
                <option value="">天龙八部</option>
                <option value="">倚天屠龙记</option>
                <option value="">神雕侠侣</option>
            </select>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mavonEditor } from 'mavon-editor'
// 引入编辑器样式 
import 'mavon-editor/dist/css/index.css'

export default {
    components: {
        mavonEditor
    },
    data() {
        return {
            content: '',
            html: '',
            base_url: 'http://127.0.0.1:8000',
            token: '',
            content_list: []
        }
    },
    methods: {
        // 展示
        show_content() {
            axios({
                url: this.base_url + '/demo/add/',

            }).then(res => {
                console.log(res.data)
                this.content_list = res.data
            })
        },
        // 添加
        addContent() {
            let formdata = new FormData()
            // 添加数据
            formdata.append('html', this.html)
            // 发送请求
            axios({
                url: this.base_url +'/demo/add/',
                method: 'post',
                data: formdata
            }).then(res => {
                console.log(res.data)
            })
        },
        // 上传图片到七牛云
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('file', $file);
           formdata.append('token', this.token)
           axios({
               url: 'http://up-z1.qiniup.com',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then(res => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               console.log(res.data)
               this.$refs.md.$img2Url(pos, 'http://qj5ps2dbi.hb-bkt.clouddn.com/' + res.data.key)
           })
        },
        // 获取七牛云token
        get_token() {
            axios({
                url: this.base_url + '/demo/qn_token/'
            }).then(res => {
                console.log(res.data)
                this.token = res.data.token
            })
        },
        // 检查富文改变的内容
        change(value, render) {
            this.html = render
            console.log(this.html)
        }
    },
    created() {
        // 在页面加完成之前，去获取token
        this.get_token()
        this.show_content()
    }
}
</script>

<style scoped>

</style>
